<template>
  <el-tooltip
    effect="dark"
    :content="props.tooltipContent ? props.tooltipContent : props.content"
    placement="top"
    :disabled="isShow"
  >
    <template #content>
      <slot name="tooltipContent">{{
        props.tooltipContent ? props.tooltipContent : props.content
      }}</slot>
    </template>
    <div class="content" :style="{ width: props.width }" @mouseover="isShowTooltip">
      <span ref="contentRef">
        <!-- 给一个没有写插槽的默认值，兼容纯文本的情况 -->
        <slot name="content">{{ props.content }}</slot>
      </span>
    </div>
  </el-tooltip>
</template>
<script setup>
// vue3.0 element-ui使用el-tooltip文本超出时，tooltip文字提示，否则不提示：
import { ref } from 'vue'
const props = defineProps({
  content: {
    type: String,
    required: true
  },
  width: {
    type: String,
    default: '100px'
  },
  tooltipContent: {
    type: String,
    default: ''
  }
})
let isShow = ref(true)
const contentRef = ref()
const isShowTooltip = function () {
  if (contentRef.value.parentNode.offsetWidth > contentRef.value.offsetWidth) {
    isShow.value = true
  } else {
    isShow.value = false
  }
}
</script>
<style lang="scss" scoped>
.content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
